<style lang="less">
  @import '../../styles/common.less';
</style>

<template>
  <Form ref="context" :model="context" :rules="ruleValidate" :label-width="110">
    <div class="ivu-row" style="border-bottom: 1px #ccc solid; margin-bottom: 20px;">
      <div style="float: left; width: 45%;border-right: 1px #ccc solid; padding-right: 20px;">
        <FormItem label="标题：" prop="title">
          <Input v-model="context.title" placeholder="请输入标题"></Input>
        </FormItem>
        <FormItem label="简介：" prop="subheading">
          <Input v-model="context.subheading" placeholder="请输入简介"></Input>
        </FormItem>
        <FormItem label="所属栏目：" prop="subject">
          <Select v-model="context.subject" style="width:200px">
            <Option v-for="item in typeList" :value="item.label" :key="item.label">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="属性：">
          <Input v-model="context.attribute" placeholder="请输入属性"></Input>
        </FormItem>
        <FormItem label="作者：">
          <Input v-model="context.auth" placeholder="请输入作者"></Input>
        </FormItem>
        <FormItem label="推荐：">
          <Select v-model="context.recommend" style="width:200px">
            <Option v-for="item in reList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
      </div>
      <div style="float: left; width: 45%; padding-left: 20px;">
        <FormItem label="副标题：" prop="otitle">
          <Input v-model="context.otitle" placeholder="请输入副标题"></Input>
        </FormItem>
        <FormItem label="自定义标签：">
          <Input v-model="context.tag" placeholder="请输入标签"></Input>
        </FormItem>
        <FormItem label="发布时间：" prop="pubTime">
          <DatePicker type="datetime" placeholder="请选择时间" format="yyyy-MM-dd HH:mm:ss" :start-date="new Date()" v-model="context.pubTime" style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem label="缩略图：" prop="imgUrl">
          <Row type="flex" justify="center" align="middle" class="height-100">
            <Upload
              :format="['jpg', 'png', 'jpeg', 'gif', 'bmp', 'svg']"
              action="/school/fileUpload/"
              :on-format-error="handleFormatError" :on-success="handleSuccess" :on-remove="handleRemove">
              <span>选择图片上传&nbsp;&nbsp;</span>
              <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
            </Upload>
          </Row>
        </FormItem>
      </div>
    </div>


    <FormItem label="内容：">
      <UE :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue"></UE>
    </FormItem>

    <FormItem>
      <Button type="primary" @click="handleSubmit('context')">提交</Button>
      <Button type="ghost" @click="handleReset('context')">清空</Button>
    </FormItem>
  </Form>
</template>

<script>
  import moment from 'moment'
  import UE from '../ue/ue.vue';
    export default {
      components: {UE},
        name: "contextmod",
        data(){
          return{
            context:{
              title:'',
              subheading:'',
              subject:'',
              attribute:'',
              tag:'',
              desc:'',
              imgUrl:'',
              recommend:'否',
              auth:'',
              pubTime:new Date(),
              otitle:'',
              id:0
            },
            ruleValidate:{
              title:[
                {required: true,message:'请输入标题',trigger:'blur'}
              ],
              subheading:[
                {required: true,message:'请输入简介',trigger:'blur'}
              ],
              subject:[
                {required: true,message:'请输入栏目',trigger:'blur'}
              ]

            },
            uploadList: [],
            typeList:[
              {value:0,label:'无'}
            ],
            reList:[
              {
                value:'否',
                label:'否'
              },
              {
                value:'是',
                label:'是'
              }
            ],
            defaultMsg: '',
            config: {
              initialFrameWidth: null,
              initialFrameHeight: 350
            },
            ue1: "ue1", // 不同编辑器必须不同的id
          }
        },
        methods:{
          handleSubmit(name){
            this.$refs[name].validate((valid) => {
              if (valid) {
                let dataArr = {
                  title:this.context.title,
                  subheading:this.context.subheading,
                  subject:this.context.subject,
                  attribute:this.context.attribute,
                  imgUrl:this.context.imgUrl,
                  desc:this.$refs.ue.getUEContent(),
                  recommend:this.context.recommend,
                  auth:this.context.auth,
                  putTime:this.context.pubTime,
                  tag:this.context.tag,
                  otitle:this.context.otitle,
                  id:this.context.id
                };

                if(this.context.id > 0){
                  this.$http.post('/school/updNews', dataArr).then(res => {
                    this.$Message.success('更新成功!');
                  });
                }else {
                  this.$http.post('/school/addNews', dataArr).then(res => {
                    this.$Message.success('更新成功!');
                    this.handleReset(name);
                  });
                }
              }
            })
          },
          handleFormatError (file) {
            this.$Notice.warning({
              title: '文件格式不正确',
              desc: '文件 ' + file.name + ' 格式不正确，请选择图片文件。'
            });
          },
          handleSuccess(response, file, fileList){
            this.context.imgUrl = response.data[0];
          },
          handleRemove(file, fileList){
            this.context.imgUrl = '';
          },
          handleReset (name) {
            this.$refs[name].resetFields();
          }
        },
      mounted () {
        if(this.$route.query.id == undefined) return;
        this.$http.get('/school/getNewsById?id='+this.$route.query.id).then(res=>{
          var dt = res.data.data;
          this.context.id = dt.id;
          this.context.title = dt.title;
          this.context.subheading = dt.subheading;
          this.context.subject = dt.subject;
          this.context.attribute = dt.attribute;
          this.context.tag = dt.tag;
          this.context.desc = dt.desc;
          this.context.imgUrl = dt.imgUrl;
          this.context.recommend = dt.recommend;
          this.context.auth = dt.auth;
          this.context.otitle = dt.otitle;
          this.context.pubTime = moment(dt.putTime).format('YYYY-MM-DD HH:mm:ss');

          this.$refs.ue.setUEContent(dt.desc)
        });
      },
      created () {
        this.$http.get('/school/getSTypes').then(res =>{
          var datas = res.data.data;
          for(var d in datas){
            var p = {
              value:datas[d].id,
              label:datas[d].name
            }

            this.typeList.push(p);
          }
        });
      }
    }
</script>

<style scoped>

</style>
